import React, { useEffect, useState, Key } from 'react'
import { useNavigate } from 'react-router-dom';
//1.2、引入设置输入框按钮
import { Button, Form, Input, Table, Card, message } from 'antd';
import { SearchOutlined, EditOutlined, DeleteOutlined } from '@ant-design/icons';
import style from './index.module.css'

//引入请求数据函数
import {
  getHospitalListRequest,
  deleteHospitalRequest,
  BatchDeleteHosRequest
} from '@/api/hospital/hospitalSet'



//引入类型
import type { getHosListRecordsType, getHosListItemType } from '@api/hospital/model/hospitalSetType'


//输入查询表单参数的类型
interface FieldValueType {
  hosname?: string,
  hoscode?: string
}

export default function HospitalSet() {
  //创建函数式路由跳
  const navigate = useNavigate()
  //进入页面自动刷新设置修改数据状态
  const [hosTable, setHosTable] = useState<getHosListRecordsType>([])

  //分页状态
  //页码
  const [current, setCurrent] = useState(1)
  //每页条数
  const [pageSize, setPageSize] = useState(5)
  //总数
  const [total, setTotal] = useState(0)
  //进入页面loading,初始为falsea
  const [isLoading, setIsLoading] = useState(false)
  //创建删除时的状态,删除完成刷新
  const [reRender, setReRender] = useState(false)
  //创建一个状态，当表格选择框的长度发生改变的状态,默认true，批量删除时开启的
  const [islength,setIslength] = useState(true)
  //批量删除要获取点选框的数据，可以保存在状态上
  const [deleteId,setDeleteId] = useState<Key[]>([])
  console.log(deleteId,'111');
  

  //当查询医院时，状态改变的值,类型是定义好数值的一个数组，参数需要？可选
  const [fieldValue, setFieldValue] = useState<FieldValueType>({})


  //第一步请求：进到页面刷新数据，所以用
  useEffect(() => {
    //请求前loading
    setIsLoading(true)
    //这里面不能直接写请求，因为异步函数写await后，后面都会变成异步，然后effect可能会返回一个函数
    //所以这里封装一个函数，然后再调用请求
    const getHospitalList = async () => {
      const result = await getHospitalListRequest({
        page: current,
        limit: pageSize,
        //展开表单查询的数据{hosname,hoscode}
        ...fieldValue
      })
      // console.log(result, '12');
      setHosTable(result.records);
      setTotal(result.total)

      // 数据请求成功后修改状态为false
      setIsLoading(false)
    }
    getHospitalList();
    //状态可以监听，或者单独封装请求函数
  }, [current, pageSize, fieldValue, reRender])


  //表格组件自带api
  interface DataType {
    key: string;
    name: string;
    age: number;
    address: string;
    tags: string[];
  }

  //表格组件自带api
  const columns = [
    {
      title: '序号',
      width: 70,
      align: 'center' as 'center',
      render(_: any, __: any, index: number) {
        return index + 1
      }
    },
    {
      title: '医院名称',
      dataIndex: 'hosname',
    },
    {
      title: '医院编号',
      dataIndex: 'hoscode',
    },
    {
      title: 'api基础路径',
      dataIndex: 'apiUrl',
    },
    {
      title: '签名',
      dataIndex: 'signKey'
    },
    {
      title: '联系人姓名',
      dataIndex: 'contactsName'
    },
    {
      title: '联系人手机',
      dataIndex: 'contactsPhone'
    },
    {
      title: '操作',
      width: 120,
      align: 'center' as 'center',
      fixed: 'right' as 'right',
      render(a: any, data: getHosListItemType) {
        //这里render接收3个参数，第二个就是data数据，这里的data就是获取到的数据，并且含id属性
        //解构拿到id
        const { id } = data
        //点击修改时 用params传参，并修改路由路径/:id
        return (
          <div>
            <Button type='primary' onClick={() => { navigate(`/syt/hospital/UpDataHos/${id}`) }} icon={<EditOutlined />} className={style.mr}></Button>
            <Button type='primary' danger icon={<DeleteOutlined />} onClick={deleteHospitalHandle(id)}></Button>
          </div>
        )
      }
    },
  ];


  //(事件回调)
  //1、点击页码刷新页面逻辑
  const pageChangeHandle = (current: number, pageSize: number) => {
    // console.log(current,pageSize);

    setCurrent(current)
    setPageSize(pageSize)
    //由于点击页码更新了，需要监听状态改变，把改变的数据加到useEffect参数里监听
  }

  // 2、表单查询逻辑(定义值的类型)
  const searchHosInfoHandle = (FieldValue: FieldValueType) => {
    //获取的值是一个对象，包含输入的两个数据
    // console.log(FieldValue);
    setFieldValue(FieldValue) //在表单中修改name的值为hosname，hoscode，并把在useEffect中监听变化
  }

  //3、点击添加跳转路由绑定点击事件
  //用编程式路由导航Navigate,由于hook需要写在函数式组件或者自定义hook中，所以单独写出去可以全局用
  //点击事件的回调函数
  const addHosHandle = () => {
    navigate('/syt/hospital/AddHospital')
  }

  //4、点击删除医院
  const deleteHospitalHandle = (id: number) => {

    return async () => {
      await deleteHospitalRequest(id)
      // console.log(1);
      //删除完毕要刷新,取反设置状态
      setReRender(!reRender)
      
      message.success('删除医院成功')
    }
  }

    // 5、批量删除医院
    const batchDeleteHandle = async()=>{

      await BatchDeleteHosRequest(deleteId)

      //删除完成重新刷新
      setReRender(!reRender)

      //删除成功弹窗
      message.success('批量删除成功')

      //删除完成后按钮状态为true
      setIslength(true)
    }

  return (
    <Card className={style.pad}>
      <Form
        name="basic"
        wrapperCol={{ span: 24 }}
        initialValues={{ remember: true }}
        autoComplete="off"
        layout='inline'
        //给表单查询增加一个函数
        onFinish={searchHosInfoHandle}

      >
        <Form.Item
          name="hosname"
        >
          <Input />
        </Form.Item>

        <Form.Item
          name="hoscode"
        >
          <Input />
        </Form.Item>

        <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
          <Button type="primary" htmlType="submit" icon={<SearchOutlined />}>
            查询
          </Button>
        </Form.Item>
        <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
          <Button type="default" htmlType="reset">
            清空
          </Button>
        </Form.Item>
      </Form>

      <div className={style.mt}>
        <Button type="primary" className={style.mr} onClick={addHosHandle}>添加</Button>
        <Button type="primary" 
        danger disabled={islength} 
        onClick={batchDeleteHandle}
        >批量删除</Button>
      </div>

      <Table
        className={style.mt}
        columns={columns}
        dataSource={hosTable}
        scroll={{ x: 1100 }}
        rowKey="id"
        bordered
        loading={isLoading}
        //添加选择框
        rowSelection={{
          onChange(key){
            // console.log(key);
            setIslength(!key.length)
            //把key设置给状态，发送请求时，传入
            setDeleteId(key)
          }
        }}
        //分页器设置
        pagination={
          {
            //页码的配置：当前页码
            current,
            //总数据的数量
            total,
            //每页条数
            pageSize,
            //展示更改每页条数的选项(默认total大于50条的时候开启)
            pageSizeOptions: [5, 10, 15, 20],
            //是否直接开启更新每页条数的选项
            showSizeChanger: true,
            //总数据展示
            showTotal(total) {
              return `总共有${total}条数据`
            },
            // 页码改变
            onChange: pageChangeHandle
          }
        }

      />
    </Card>
  )
}
